<!--
    @title index.vue
    @description TODO 基本信息
    @author yuzhenhan
    @date 2021/02/23 11:56:08
-->
<template>
  <div>
    <el-card style="height: 100%" class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>个人信息</span>
      </div>
      <div class="text item">
        <div class="hello" >
          <el-form ref="dataForm"
                   :model="data"
                   :rules="rules"
                   inline-message
                   label-width="80px">
            <el-form-item label="登录名" prop="userCode" style="width: 20%;">
              <el-input v-model="data.userCode" disabled></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="userName" style="width: 20%;">
              <el-input v-model="data.userName"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile" style="width: 20%;">
              <el-input v-model="data.mobile"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email" style="width: 20%;">
              <el-input v-model="data.email"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>

  </div>
</template>

<script>
import { getUserUpdate, updateUserBaseInfo } from '@/api/uc/user'

export default {
  name: 'index',
  data(){var checkPhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入联系人电话'))
      } else {
        let regPone = null
        const mobile = /^1(3|4|5|6|7|8|9)\d{9}$/
        const tel = /^0\d{2,3}-\d{7,8}$/
        if (parseInt(value.charAt(0)) === 0) {
          regPone = tel
        } else {
          regPone = mobile
        }
        if (!regPone.test(value)) {
          return callback(
            new Error("请填写联系人电话(座机格式'区号-座机号码')")
          )
        }
        callback()
      }
    }
    return{
      rules: {
        userCode: [
          { pattern: /^[a-zA-Z0-9_-]+$/, message: '登录名由a-zA-Z0-9_-等字母组成', trigger: 'change' }
        ],
        mobile: [
          { validator: checkPhone, message: '电话格式不正确', trigger: 'change' }
        ],
        email: [
          { pattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, message: '邮箱格式错误', trigger: 'change' }
        ]
      },
      imgUrl: null,
      data:{
        userCode: "",
        userName: "",
        mobile: "",
        email: ""
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods:{
    getData(){
      getUserUpdate().then(res => {
        this.data.userId = res.data.userId
        this.data.userCode = res.data.userCode
        this.data.userName = res.data.userName
        this.data.mobile = res.data.mobile
        this.data.email = res.data.email
      })
    },
    onSubmit(){
      this.$refs['dataForm'].validate(valid => {
        updateUserBaseInfo(this.data).then(res => {
          this.$message.success("保存成功")
        })
      })
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg';
      // const isLt2M = file.size / 1024 / 1024 < 2;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      // return isJPG && isLt2M;
    }
  }
}
</script>

<style scoped>
.box-card{
  border: 0px solid #000;
  /* background-color: #0a0; */
  height: 100vh;
}

</style>>


